import React, { useState, useEffect } from 'react';
import './index.css';
import Timer from './components/Timer';
import { Button } from 'antd-mobile'

const shuffle = function (array) {
    var m = array.length,
        t, i;
    while (m) {
        i = Math.floor(Math.random() * m--);
        t = array[m];
        array[m] = array[i];
        array[i] = t;
    }
    return array;
}

const Game = (props) => {
    // 容器行列数量
    const [rowCount, setRowCount] = useState(0);
    // 容器内容数组
    const [quareArr, setQuareArr] = useState([]);
    // 设置方块宽高
    const [quareStyle, setQuareStyle] = useState('');
    // 颜色容器
    const [colorArr, setcolorArr] = useState([]);
    // 当前点击数字
    const [crueentNumber, setcrueentNumber] = useState(1);
    // 容器背景
    const [ulColor, setulColor] = useState('#ddd');
    // 游戏时间
    const [time, setTime] = useState(0);
    // 倒计时
    const [startTime, setStartTime] = useState(3);
    function restart() {
        setStartTime(3);
        setTime(0);
        let a = props.location.state.rowCount
        setQuareCount(a * a, a);
        setcrueentNumber(1);

    }
    useEffect(() => {
        let a = props.location.state.rowCount
        setQuareCount(a * a, a);
    }, [])
    useEffect(() => {
        if (startTime > 0) {
            setTimeout(() => {
                setStartTime(startTime => startTime - 1)
            }, 1000);
        }
    }, [startTime])
    useEffect(() => {
        // 颜色种类
        const colorType = ['#ebd00f', '#0f9aeb', '#eb0f21', '#0feb2c'];
        setcolorArr(colorArr => {
            let empty = [];
            for (let i = 0; i < quareArr.length; i++) {
                empty.push(colorType[parseInt(Math.random() * 4)])
            }
            return empty

        })
        setQuareStyle(() => (100 / (quareArr.length / rowCount)) + '%');
    }, [rowCount, quareArr])
    // 设置容器内容
    function setQuareCount(count, rowCount) {
        setQuareArr(quareArr => {
            let empty = [];
            for (let i = 0; i < count; i++) {
                empty.push(i + 1)
            }
            return shuffle(empty)
        })
        setRowCount(rowCount)
    }
    // 游戏规则
    function tapQuare(item) {
        if (Number(item) === crueentNumber) {
            setcrueentNumber(crueentNumber + 1)
            setulColor('green')
            setTimeout(() => {
                setulColor('#ddd')
            }, 100)
        } else {
            setulColor('red')
            setTimeout(() => {
                setulColor('#ddd')
            }, 100)
        }
        if (crueentNumber === quareArr.length) {
            alert('恭喜，闯关成功！')
        }
    }
    // 退出
    function back() {
        console.log(props);
        props.history.replace('/')
    }
    return (
        <div className='game'>
            <div className='back'>
                <Button onClick={() => { back() }} size='mini' color='primary' > 返回 </Button>
            </div>
            {
                !startTime ? <Timer time={time} setTime={setTime}></Timer> : <div class="timer">00:00:00</div>
            }
            <div className="next">下一个：{crueentNumber}</div>
            <div className='block'>
                <ul className='game_box' style={{ background: ulColor }}>
                    {
                        quareArr.map((item, index) => {
                            return (
                                <li
                                    onClick={() => { tapQuare(item) }}
                                    style={{ width: quareStyle, height: quareStyle, background: colorArr[index] }}
                                    key={index}>
                                    {item}
                                </li>
                            )
                        })
                    }
                </ul>
                {
                    startTime ? <div className="mask">{startTime}</div> : <></>
                }
            </div>
            <div className='tip'>以升序从 1 到 {rowCount * rowCount} 按数字</div>
            <div className='reStart' onClick={() => restart()}>重新开始</div>
        </div>
    );
}

export default Game;
